<template>
	<!-- 购买服务详情 -->
	<view style="width: 100%;height: 100%;">
		<scroll-view scroll-y="true" :style="{height:windowHeight}">
			<view>
				<swiper  class="swiper" @change="swiperChange">
					<block v-for="(item,index) in itemDetail.picUrlsImage" :key="index">
						<swiper-item>
							<view class="swiper-item">
								<image :src="item" mode="scaleToFill" style="height: 750rpx;width: 100%;"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view style="display: flex;">
					<view class="dot-view">
						<view class="">
							<text>{{nowAdw}}</text>
							<text>/</text>
							<text>{{totalAdv}}</text>
						</view>
						
					</view>
				</view>
							
				<view class="detail-view" style="z-index: 9999;">
					<view class="detail-view-title">
						{{itemDetail.name}}
					</view>
					
					<view style="margin-top: 16rpx;">
						<text style="color: #F35C22;font-size: 28rpx;margin-left: 32rpx;">¥</text>
						<text style="color: #F35C22;font-size: 40rpx;font-weight: 600;">{{itemDetail.priceShow}}</text>
					</view>
					
					<view class="detail-view-d">
						<image :src="phone_qyfw" class="detail-view-d-i"></image>
						<view style="display: flex;font-size: 24rpx;counter-reset: #666666;width: 574rpx;align-items: center;">
							<view style="width: 50%;">
								<view style="margin-left: 24rpx;">
									· 有效期{{itemDetail.expireDay}}天
								</view>
								<view style="margin-left: 24rpx;margin-top: 6rpx;">
									· 每{{itemDetail.cycleValue}}{{itemDetail.cycleUnit.desc}}可咨询
									<text>{{itemDetail.cycleTimes == '-1' ? '不限':itemDetail.cycleTimes}}</text> 次
								</view>
							</view>
							<view style="width: 50%;">
								<view class="">
									· 可发起总咨询数
									<text>{{itemDetail.consultCount == '-1' ? '不限':itemDetail.consultCount}}</text>
									次
								</view>
								<view style="margin-top: 6rpx;">
									· 可咨询领域: <text>{{itemDetail.domainDict == '-1' ? '不限':itemDetail.domainDict}}</text>
								</view>
							</view>
							
						</view>
					</view>
					
				</view>
				
				<view class="desc-view">
					<view class="desc-view-title">
						<text style="margin-left: 32rpx;">服务介绍</text>
					</view>
					
					<view style="padding-left: 32rpx;padding-right: 32rpx;">
						<rich-text :nodes="itemDetail.intro"></rich-text>>
						
					</view>
					
				</view>
				
				
			</view>
		</scroll-view>
		
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view style="margin-left: 32rpx;">
					<text style="color: #F35C22;font-size: 28rpx;">¥</text>
					<text style="color: #F35C22;font-size: 44rpx;font-weight: 600;">{{itemDetail.priceShow}}</text>
				</view>
				<view class="view-bottom-b" @click="gotobuy">
					确认购买
				</view>
			</view>
			<!-- <view style="height: 68rpx;background: #ffffff;" v-if="needAdapt"> -->
				<!-- 苹果x及以上的安全距离 -->
			<!-- </view> -->
		</view>
		<link-customer v-if="showLink" @closeLink="closeLink" :linkList="linkList" :tag="tag"
		 @addIt="addIt" @buyIt="buyIt"></link-customer>
	</view>
</template>

<script>
	import linkCustomer from '@/pages/phone/common/linkCustomer.vue'
	import verify from '@/pages/utils/verifyUtils.js'
	let app = ''
	export default{
		components:{linkCustomer},
		data(){
			return{
				id:'',
				nowAdw:1,
				role:'',
				roleUrl: '',
				totalAdv:0,
				windowHeight: 0,
				needAdapt: false, //判断是不是苹果x以上机型
				isHave:true,//是否有关联客户
				showLink:false,
				
				itemDetail:null,
				linkList:[],//关联客户的列表
				
				price:0,
				goodsId:'',
				goodsName:'',
				
				tag:'buy',
				phone_qyfw:getApp().globalData.baseImageUrl+'/phone_qyfw.png'
			}
		},
		onLoad:function(options) {
			app = getApp()
			let _this = this
			_this.id = options.id
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			// if(_this.needAdapt){
			// 	_this.windowHeight = (app.globalData.windowHeight - 88)*2 + 'rpx'
			// }else{
			// 	_this.windowHeight = (app.globalData.windowHeight - 54)*2 + 'rpx'
			// }
			
			if(app.globalData.isIPhone){
				if (app.globalData.isMax) {
					_this.windowHeight = (app.globalData.windowHeight - 140 - app.globalData.statusBarHeight) * 2 + 'rpx'
					// _this.scrollViewHeight = app.globalData.windowHeight - 180 - app.globalData.statusBarHeight
				} else if (app.globalData.isPlus) {
					_this.windowHeight = (app.globalData.windowHeight - 100 - app.globalData.statusBarHeight) * 2 + 'rpx'
					// _this.scrollViewHeight = app.globalData.windowHeight - 140 - app.globalData.statusBarHeight
				} else {
					_this.windowHeight = (app.globalData.windowHeight - 70 - app.globalData.statusBarHeight) * 2 + 'rpx'
					// _this.scrollViewHeight = app.globalData.windowHeight - 110 - app.globalData.statusBarHeight
				}
			}else{
				_this.windowHeight = (app.globalData.windowHeight-40 ) * 2 + 'rpx'
				// _this.scrollViewHeight = app.globalData.windowHeight-110
			}
			
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			
			
		},
		onShow() {
			this.getDetail()
			//查询可关联的客户
			this.getCustomList()
		},
		mounted() {
			
		},
		methods:{
			/**
			 * 轮播图滑动事件  
			 */
			swiperChange(val){
				console.log(val)
				this.nowAdw = val.detail.current+1
			},
			async getDetail(){
				let _this = this
				const res = await _this.$myRequest({
					url:`/${_this.roleUrl}/goods/${_this.id}`
				})
				console.log('详情',res)
				if(res.data.code==200){
					let detail = res.data.data
					detail.picUrlsImage = []
					let pics = detail.picUrls
					if(verify.isNotEmpty(pics)){
						if(pics.indexOf(',')>-1){
							let imgs = pics.split(',')
							detail.picUrlsImage = imgs.map((obj,index) => {
								obj.picUrlsImage = _this.$imageUrls({
									picUrls:obj,
									height:'200'
								})
							    return obj;
							})
							
						}else{
							let imgs = _this.$imageUrls({
									picUrls:pics
								})
								detail.picUrlsImage.push(imgs)
								
							
						}
					}
					detail.priceShow = (detail.price/100).toFixed(2)
					_this.totalAdv = detail.picUrlsImage.length
					
					_this.itemDetail = detail
			

				}
			},
			
			/**
			 * 点击了购买
			 */
			gotobuy(){
				//先判断是否有关联客户
				let _this = this
				console.log('确认购买')
				_this.price = _this.itemDetail.price
				_this.goodsId = _this.itemDetail.id
				_this.goodsName =  _this.itemDetail.name
				
				if(_this.linkList.length>0){
					//有的话弹窗选择
					console.log(_this.linkList.length)
					
					_this.showLink = true
				}else{
					//没有的话跳转新增
					uni.navigateTo({
						url:'../addNewLink/addNewLink?price='+_this.price+'&goodsId='+_this.goodsId+'&goodsName='+_this.goodsName
					})
				}
	
			},
			/**
			 * 关联客户弹窗中选择确定
			 */
			async buyIt(user){
				console.log('购买',user)
				let _this = this
				uni.showLoading({
					title:"正在提交订单..."
				})
				let data={
					goodsId:_this.goodsId,
					goodsName:_this.goodsName,
					custId:user.id,
					custName:user.name,
					orderAmt:_this.price,
					buyerId:app.globalData.userInfo.userId	
				}
				
				const res = await _this.$myRequest({
					url:`/${_this.roleUrl}/goodsOrder`,
					method:'POST',//默认是GET
					data:data,
				})
				uni.hideLoading()
				console.log('订单提交结果',res)
				if(res.data.code==200){
					// uni.showToast({
					// 	title:'提交成功!',
					// 	icon:"success"
					// })
					_this.getDetail()
					_this.payIt(res.data.data.tradeId)
				}
			},
			/**
			 * 支付
			 */
			async payIt(id){
				let _this = this
				uni.showLoading({
					title:"正在支付..."
				})
				// let data={
				// 	tradeId:id,
				// }
				
				
				const res = await _this.$myRequest({
					url:`/wx/pay/create?tradeId=${id}`,
					method:'POST',//默认是GET
					// data:data,
				})
				uni.hideLoading()
				console.log('支付结果',res)
				if(res.data.code==200){
					
					uni.requestPayment({
						"timeStamp":res.data.data.timeStamp,
						"nonceStr": res.data.data.nonceStr,
						"package": res.data.data.packageValue,
						"signType": res.data.data.signType,
						"paySign": res.data.data.paySign,
						success: (payres) => {
							console.log('微信支付成功结果',payres)
							if(payres.errMsg==='requestPayment:ok'){
								uni.showToast({
									title:'购买成功!',
									icon:'success'
								})
								_this.getDetail()
								_this.getCustomList()
								_this.closeLink(false)
							}
							
							// _this.checkResult(id)
							
							
						},
						fail: (payerr) => {
							// console.log('微信支付失败结果',payerr)
							// _this.checkResult(id)
						}
					})
					
				
				}else{
					uni.showToast({
						title:res.data.msg
					})
				}
				
			},
			//查询支付结果
			async checkResult(id){
				let _this = this
				uni.showLoading({
					title:"查询支付结果..."
				})
				// let data={
				// 	tradeId:id,
				// }
				
				const res = await _this.$myRequest({
					url:`/wx/pay/create?tradeId=${id}`,
					method:'POST',//默认是GET
					// data:data,
				})
				uni.hideLoading()
			},
			/**
			 * 关联客户弹窗中选择新增
			 */
			addIt(){
				console.log('添加')
				let _this = this
	
				uni.navigateTo({
					url:'../addNewLink/addNewLink?price='+_this.price+'&goodsId='+_this.goodsId+'&goodsName='+_this.goodsName
				})
			},
			/**
			 * 关闭弹窗
			 */
			closeLink(val){
				console.log(val)
				let _this = this
				_this.showLink = false
			},
			
			/**
			 * 查询可关联的客户
			 */
			async getCustomList(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/client/customer/list",
					method:'POST',//默认是GET
				})
				console.log('可关联的客户',res)
				if(res.data.code==200){
					_this.linkList = res.data.data.list
					
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.swiper{
		height:750rpx;
		width: 100%;
	}
	
	.dot-view{
		width: 80rpx;
		height: 40rpx;
		background: #000000;
		border-radius: 20rpx;
		opacity: 0.5;
		margin-left: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -88rpx;
		margin-right: 32rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	
	.detail-view{
		width: 100%;
		height: 368rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: -20rpx;
	}
	
	.detail-view-title{
		width: 686rpx;
		margin-left: 32rpx;
		padding-top: 24rpx;
		padding-right: 23rpx;
		height: 100rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	
	.detail-view-d{
		height: 112rpx;
		background: #E8F7FB;
		display: flex;
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 24rpx;
	}
	
	.detail-view-d-i{
		width: 112rpx;
		height: 112rpx;
	}
	
	.desc-view{
		background-color: #FFFFFF;
		margin-top: 24rpx;
	}
	
	.desc-view-title{
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	
	.view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	.view-bottom-s{
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	.view-bottom-b{
		width: 440rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: auto;
		margin-right: 32rpx;
	}
</style>